<template>
    <el-dialog class="lucky-info-dialog" v-model="visible" title="发货信息" width="600px">
        <el-descriptions :column="1" class="custom-el-desc">
            <el-descriptions-item
                v-for="{ label, prop } in commonListCopy"
                :label="label"
                :key="label"
                label-class-name="custom-lucky-label">
                <template v-if="prop === 'addressInfo'">
                    <div>
                        <div>
                            <span>{{ form.addressInfo?.name }}</span
                            ><span style="margin-left: 8px">{{ form.addressInfo?.mobile }}</span>
                        </div>
                        <div>
                            {{ form.addressInfo?.address }}
                        </div>
                    </div>
                </template>
                <template v-if="prop !== 'addressInfo'">
                    {{ form[prop] }}
                </template>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import request from '@/request/index';

let visible = ref(false);
let form = reactive({});
const commonList = [
    { name: '', label: '发货方式', desc: '', prop: 'sendText' },
    { name: '', label: '快递公司', desc: '', prop: 'logisticsCompany' },
    { name: '', label: '快递单号', desc: '', prop: 'logisticsNumber' },
    { name: '', label: '收货信息', desc: '', prop: 'addressInfo' }
];
let logisticsList = reactive([]);

const commonListCopy = computed(() => {
    // todo发货方式物流配送，线下配送
    if (form.deliveryMethod == 1) {
        return commonList;
    }
    return [commonList[0], commonList[3]];
});

const handleVisible = (isVisible = false) => {
    visible.value = isVisible;
};

const getCompany = async () => {
    let res = await request('getLogisticsListServ');
    logisticsList.length = 0;
    Object.assign(logisticsList, res.data || []);
};

const handleDialog = async id => {
    const { data } = await request('activityDrawDelivceryInfo', { id });
    data.sendText = ['物流配送', '线下配送'][data.deliveryMethod - 1];
    Object.assign(form, data);
    handleVisible(true);
};

defineExpose({
    handleDialog
});

onMounted(() => {
    getCompany();
});
</script>

<style lang="scss">
.lucky-info-dialog {
    .el-descriptions__content {
        display: inline-flex;
        width: 400px;
    }
}
</style>
